<script setup lang="ts">
import { computed, ref } from "vue";
import { useEquip } from "@/stores/useEquip";
import { useNowTime } from "@/hooks/useNowTime";
import Section01 from "./components/Section01.vue";
import Section02 from "./components/Section02.vue";
import Section03 from "./components/Section03.vue";
import Section04 from "./components/Section04.vue";
import Section05 from "./components/Section05.vue";
import Section06 from "./components/Section06.vue";
import MapArea from "./components/MapArea.vue";
import { equip1, equip2 } from "@/configs/equip";
import default_equip_info from "@/assets/data/default_equip_info.json";
import { datetimeFormat } from "@/utils/date";

const equipStore = useEquip();
const nowTime = useNowTime();
const innerWidth = ref(0);
const innerHeight = ref(0);
const equip1V2 = computed(() => equipStore.equipsInfo.find((v) => v.fUNID == equip1.unid) || (default_equip_info as Equip.EquipInfo));
const equip2V2 = computed(() => equipStore.equipsInfo.find((v) => v.fUNID == equip2.unid) || (default_equip_info as Equip.EquipInfo));
const weekIndayV2 = computed(() => {
    const weekDays = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
    return weekDays[new Date(nowTime.nowTime.value).getDay()];
});
function resize() {
    innerWidth.value = window.innerWidth;
    innerHeight.value = window.innerHeight;
}
resize();
let timer = null as NodeJS.Timeout | null;
window.addEventListener("resize", () => {
    timer && clearTimeout(timer);
    timer = setTimeout(resize, 200);
});
</script>

<template>
    <div class="index" :style="{ transform: 'scale(' + innerWidth / 1920 + ', ' + innerHeight / 1080 + ')' }">
        <div class="sidebar-left"></div>
        <div class="sidebar-right"></div>
        <header><span>智慧农业可视化大屏</span></header>
        <main>
            <div class="main-left">
                <h2><span>晴</span><span>25℃</span><span>河南省郑州市</span></h2>
                <Section01 :equip2-v2="equip2V2" />
                <Section02 :equip2-v2="equip2V2" />
                <Section03 :equip1-v2="equip1V2" />
            </div>
            <div class="main-center">
                <MapArea />
            </div>
            <div class="main-right">
                <h2>
                    <span>{{ datetimeFormat(nowTime.nowTime.value, "Y-M-D") }}</span>
                    <span>{{ weekIndayV2 }}</span>
                    <span>{{ datetimeFormat(nowTime.nowTime.value, "h:m:s") }}</span>
                </h2>
                <Section04 :equip1-v2="equip1V2" :equip2-v2="equip2V2" />
                <Section05 />
                <Section06 />
            </div>
        </main>
        <footer>
            <button class="active">
                <svg class="icon" aria-hidden="true"><use xlink:href="#icon-zhiwu"></use></svg>
                <span>一号田</span>
            </button>
            <button>
                <svg class="icon" aria-hidden="true"><use xlink:href="#icon-zhiwu"></use></svg>
                <span>二号田</span>
            </button>
            <button>
                <svg class="icon" aria-hidden="true"><use xlink:href="#icon-zhiwu"></use></svg>
                <span>三号田</span>
            </button>
            <button>
                <svg class="icon" aria-hidden="true"><use xlink:href="#icon-zhiwu"></use></svg>
                <span>四号田</span>
            </button>
        </footer>
    </div>
</template>

<style scoped lang="scss">
@use "@/styles/vars" as *;
.index {
    position: relative;
    width: 1920px;
    height: 1080px;
    transform-origin: 0 0;
    display: flex;
    flex-direction: column;
    background: radial-gradient(circle at 50% 50%, var(--darken-primary-color) 0%, #11241c 100%);
    .sidebar-left {
        position: absolute;
        top: 0;
        left: 0;
        width: 10px;
        height: 100%;
        background: url("@/assets/images/sidebar-left.png") 0 0 / 100% 100%;
    }
    .sidebar-right {
        position: absolute;
        top: 0;
        right: 0;
        width: 10px;
        height: 100%;
        background: url("@/assets/images/sidebar-right.png") 0 0 / 100% 100%;
    }
    header {
        flex-shrink: 0;
        position: relative;
        box-sizing: border-box;
        padding-top: 10px;
        width: 100%;
        height: 70px;
        text-align: center;
        background: url("@/assets/images/header.png") 0 0 / 100% 100%;
        span {
            font-size: 32px;
            font-weight: bold;
            background-image: linear-gradient(to bottom, #fff, var(--primary-color));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
    }
    main {
        flex: 1;
        margin-top: -40px;
        margin-bottom: -40px;
        display: flex;
        .main-left,
        .main-right {
            box-sizing: border-box;
            flex-shrink: 0;
            padding: 10px 30px 30px;
            width: 460px;
            height: 100%;
            display: flex;
            flex-direction: column;
            h2 {
                margin-bottom: 14px;
                display: flex;
                column-gap: 16px;
                span {
                    color: var(--primary-color);
                    font-size: 18px;
                }
            }
        }
        .main-center {
            flex: 1;
            padding: 10px 0 30px;
        }
        .main-right {
            h2 {
                justify-content: flex-end;
            }
        }
    }
    footer {
        flex-shrink: 0;
        width: 100%;
        height: 50px;
        background: url("@/assets/images/footer.png") 0 0 / 100% 100%;
        display: flex;
        justify-content: center;
        column-gap: 40px;
        button {
            display: flex;
            align-items: center;
            background-color: transparent;
            column-gap: 4px;
            .icon {
                color: rgb(26, 211, 213);
                font-size: 32px;
            }
            span {
                flex-shrink: 0;
                color: rgb(26, 211, 213);
                font-size: 16px;
                font-weight: bold;
            }
            &.active {
                .icon {
                    color: rgb(241, 247, 97);
                }
                span {
                    color: rgb(241, 247, 97);
                }
            }
        }
    }
}
</style>
